<template>

  <div class="container">
    <div>
      <el-dialog :visible="showDialog" :title="flag?'修改文章':'添加文章'" :before-close="handleclose" @open="handleOpen">
        <el-form ref="formRef" :model="pubForm" :rules="rules">
          <el-form-item label="文章标题" :label-width="formLabelWidth" prop="title">
            <el-input v-model="pubForm.title" autocomplete="off" />
          </el-form-item>
          <el-form-item label="文章内容" :label-width="formLabelWidth" prop="articleBody">
            <!-- 富文本编辑器 -->
            <!-- <quillEditor v-model="editItem.articleBody" /> -->
            <quill-editor v-model="pubForm.articleBody" :options="editorOption" class="editor">
              >
            </quill-editor>
          </el-form-item>
          <el-form-item label="视频地址" :label-width="formLabelWidth">
            <el-input v-model="pubForm.videoURL" autocomplete="off" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-top:15px">
          <el-button type="primary" style="transform:translateY(-60px);float:right;" @click="handleSubmit">确 定</el-button>
          <el-button style="transform:translateY(-70px);float:right;margin:10px" @click="handleclose">取 消</el-button>
        </div>
      </el-dialog>

    </div>
  </div>

</template>

<script>
// 引入样式和quillEditor
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

// 工具栏配置项
const toolbarOptions = [
  // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['bold', 'italic', 'underline', 'strike'],
  // 引用  代码块-----['blockquote', 'code-block']
  ['blockquote', 'code-block'],
  // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
  [{ header: 1 }, { header: 2 }],
  // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  // [{ list: 'ordered' }, { list: 'bullet' }],
  // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
  // [{ script: 'sub' }, { script: 'super' }],
  // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
  [{ indent: '-1' }, { indent: '+1' }],
  // 文本方向-----[{'direction': 'rtl'}]
  [{ direction: 'rtl' }],
  // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
  // [{ size: ['small', false, 'large', 'huge'] }],
  // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
  // [{ header: [1, 2, 3, 4, 5, 6, false] }],
  // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
  // [{ color: [] }, { background: [] }],
  // 字体种类-----[{ font: [] }]
  // [{ font: [] }],
  // 对齐方式-----[{ align: [] }]
  [{ align: [] }],
  // 清除文本格式-----['clean']
  ['clean'],
  // 链接、图片、视频-----['link', 'image', 'video']
  ['image', 'video']
]
import { add, update, detail } from "@/api/hmmm/articles.js"
export default {
  name: 'ArticleAdd',
  components: {
    quillEditor
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    flag: {
      type: Boolean,
      default: false// false添加,true编辑
    },
    editItem: {
      type: Object,
      default: () => ({})
    },

  },
  data () {
    return {
      editorOption: {
        modules: {
          toolbar: toolbarOptions
        },
        theme: 'snow',
        placeholder: '请输入正文'
        // Some Quill optiosn...
      },
      rules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
        ],
        videoURL: [
          { required: true, message: '请输入视频地址', trigger: 'blur' },
        ],
      },
      // 表单的数据对象
      pubForm: {
        // id
        id: "",
        // 文章标题
        title: "",
        // 文章的内容
        articleBody: "",
        videoURL: ""
      },
      formLabelWidth: '120px'
    }
  },
  methods: {
    async handleOpen () {
      if (this.flag) {
        console.log(this.editItem);
        const res = await detail({ id: this.editItem.id })
        if (res.status === 200) {
          this.pubForm = res.data
        }
      }
    },
    // 判断模态框是新增还是修改,如果是修改那么就渲染数据
    // 提交文章
    handleSubmit () {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return

        try {
          if (this.pubForm.id) {
            // ==============================================修改
            const ret = await update(this.pubForm)
            if (ret.status === 200) {
              this.$message.success('文章修改成功!')
              this.$emit('update:showDialog', false)
              this.pubForm.id = ""
              this.$refs.formRef.resetFields()
              this.formData = this.$options.data().formData
              // 刷新列表   this.$parent表示父组件实例对象
              this.$parent.GetArticlesList()
            } else {
              this.$message.error("文章修改失败!");
            }
          } else {
            // ================================================新增
            const res = await add(this.pubForm)
            if (res.status === 200) {
              this.$emit('update:showDialog', false)
              this.$refs.formRef.resetFields()
              this.formData = this.$options.data().formData
              this.$message.success('文章新增成功!')
              // 刷新列表   this.$parent表示父组件实例对象
              this.$parent.GetArticlesList()
            } else {
              this.$message.error('文章新增失败!')
            }
          }
        } catch {
          this.$message.error("操作异常")
        }
      })
    },
    // 通知父组件关闭弹窗
    handleclose () {
      this.$refs.formRef.resetFields()
      this.formData = this.$options.data().formData
      this.$emit('update:showDialog', false)
    },
    // // 失去焦点事件
    // onEditorBlur (e) {
    //   console.log('onEditorBlur: ', e)
    // },
    // // 获得焦点事件
    // onEditorFocus (e) {
    //   console.log('onEditorFocus: ', e)
    // },
    // // 内容改变事件
    // onEditorChange (e) {
    //   console.log('onEditorChange: ', e)
    // }

  }
}
</script>

<style scoped lang='less'>
// 设置富文本编辑器的默认最小高度
/deep/.ql-editor {
  min-height: 300px;
}
</style>
